<template>
  <div class="w-full">
    <div class="text-center ">

      <ElTable :data="option">
        <ElTableColumn prop="name" label="类型">
          <template #="{ row }">
            {{ row.name }}{{ row.code }}
          </template>
        </ElTableColumn>
        <ElTableColumn label="已选题数">
          <template #="{ row }">
            {{ row.list.length }}
          </template>
        </ElTableColumn>
        <ElTableColumn label="每题得分">
          <template #="{ row }">
            <ElInput v-model="row.score" />
          </template>
        </ElTableColumn>
        <ElTableColumn label="总分">
          <template #="{ row }">
            {{ row.score * row.list.length }}
          </template>
        </ElTableColumn>
        <ElTableColumn label="详情/选题">
          <template #="{ row }">
            <ElButton @click="choose(row)">选择</ElButton>
          </template>
        </ElTableColumn>
      </ElTable>


    </div>
    <el-drawer v-model="drawerVisible" title="选题" size="80%" destroy-on-close>
      <div class="  h-full flex flex-col">
        <ElTable :data="questions" class="grow" v-loading="loading" @selection-change="selectChange" ref="tableRef">
          <ElTableColumn type="selection" :label='t("crud.selection")'></ElTableColumn>
          <ElTableColumn :label='t("question-manage.group")' prop="group.name"></ElTableColumn>
          <ElTableColumn :label='t("question-manage.level")' prop="level"></ElTableColumn>
          <ElTableColumn :label='t("question-manage.type")' prop="type"></ElTableColumn>
          <ElTableColumn :label='t("question-manage.question")' prop="title"></ElTableColumn>
        </ElTable>
        <div class="flex justify-end">
          <el-pagination class="shrink-0 mt-4" background layout="prev, pager, next" :total="total"
            @current-change="getQuestion" :page-size="20" />
        </div>

      </div>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancel">{{ t('crud.cancel') }}</el-button>
          <el-button type="primary" @click="confirm">{{ t('crud.ok') }}</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang='ts'>
import { TransType } from '@/hooks/auto-imports/useTrans';
import { page, question_types, QuestionType, QuestionVo, levels } from '@/modules/question/api/question';
// import type { MaProTableExpose, MaProTableOptions, MaProTableSchema } from '@mineadmin/pro-table'
// import { getTableSchema } from './data/custom';
const tableRef = ref()
const total = ref(0);
const loading = ref(false);
const model = defineModel({
  default: question_types.map(item => Object.assign(item, { score: 0, list: [] as any[] }))
})
const option = ref(model.value);
const drawerVisible = ref(false);
const selected = ref<any[]>([]);
const i18n = useTrans() as TransType
const t = i18n.globalTrans
const type = ref<QuestionType>(option.value[0].code as QuestionType);
const questions = ref<QuestionVo[]>([]);
const choose = row => {
  type.value = row.code
  drawerVisible.value = true;
  getQuestion()
}
function selectChange(selections) {
  selected.value = selections;
}
function getQuestion(currpage: number = 1) {
  loading.value = true;
  page(
    { type: type.value, page_size: 20, page: currpage }
  ).then(res => {
    loading.value = false;
    total.value = res.data.total;
    questions.value = res.data.list.map(row => {
      const lv = levels.find((lv) => lv.level == row.level);
      //@ts-ignore
      row.level_text = lv?.name || row.level
      //@ts-ignore
      row.type = question_types.find((type) => type.code == row.type)?.name ||
        row.type;
      return row;
    });
    nextTick(()=>{
      if( !tableRef.value ){
        return ;
      }
      const curr = option.value.find(v => v.code == type.value);
      curr && res.data.list.forEach(item => {
        if (curr.list.includes(item.id)) {
          nextTick(()=>{
            tableRef.value.toggleRowSelection(item)
          })
        }
      })
    })
  })
}
getQuestion();
const cancel = () => {
  drawerVisible.value = false;
}
const confirm = () => {
  drawerVisible.value = false;
  option.value.forEach(opt => {
    if (opt.code == type.value) {
      opt.list = selected.value.map(s => s.id)
    }
  })
  console.log(option.value,)

}

watch(() => option.value, (v) => {
  model.value = v;
}, { deep: true })
</script>

<style></style>
